import React, { useState } from "react";
import { Table, Space, Modal } from "antd";
import DeleteUser from "./useListBtn/DeleteUser";
import EditUser from "./useListBtn/EditUser";
interface IUser {
  id: number;
  name: string;
}
// interface IState {
//   userList: IUser[];
// }

const UseList: React.FC = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [userObj, setUserObj] = useState({ id: 0, name: "1" });
  let userList: IUser[] = [];
  for (let i = 0; i < 20; i++) {
    userList.push({
      id: i,
      name: "user" + i,
    });
  }
  const [userListOne, setUserListOne] = useState(userList);
  const editfun = (obj: any) => {
    setUserObj(obj);
    setIsModalVisible(true);
  };
  const deleteUser = (id: number) => {
    setUserListOne(userList.filter((user) => user.id !== id));
  };
  // const inputRef = useRef<any>("");
  // const val = inputRef.current!.state.value;
  const handleOk = () => {
    // setUserObj(e);
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  return (
    <div>
      {" "}
      <Table dataSource={userListOne} rowKey="id">
        <Table.Column title={"id"} dataIndex="id" />
        <Table.Column title={"name"} dataIndex="name" />
        <Table.Column
          title={"管理"}
          render={(user: IUser) => (
            <Space>
              <EditUser obj={user} callback={editfun} />
              <DeleteUser id={user.id} callback={deleteUser} />
            </Space>
          )}
        />
      </Table>
      <>
        <Modal
          title="Basic Modal"
          visible={isModalVisible}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          <p>id:{userObj.id}</p>
          <p>name:{userObj.name}</p>
          <p>Some contents...</p>
        </Modal>
      </>
    </div>
  );
};

export default UseList;
// export default class UseList extends Component<any, IState> {
//   constructor(state: any, context: any) {
//     super(state, context);
//     let userList: IUser[] = [];
//     for (let i = 0; i < 20; i++) {
//       userList.push({
//         id: i,
//         name: "user" + i,
//       });
//     }
//     this.state = { userList: userList };
//   }
//   editfun = (obj: object) => {
//     console.log(obj);
//   };
//   deleteUser = (id: number) => {
//     this.setState({
//       userList: this.state.userList.filter((user) => user.id !== id),
//     });
//   };

//   render() {
//     return (
//       <>
//         <Table dataSource={this.state.userList} rowKey="id">
//           <Table.Column title={"id"} dataIndex="id" />
//           <Table.Column title={"name"} dataIndex="name" />
//           <Table.Column
//             title={"管理"}
//             render={(user: IUser) => (
//               <Space>
//                 <EditUser obj={{ id: user.id }} callback={this.editfun} />
//                 <DeleteUser id={user.id} callback={this.deleteUser} />
//               </Space>
//             )}
//           />
//         </Table>

//       </>
//     );
//   }
// }
